<template>
  <div class="container">
    <el-card class="box-card">
      <!-- 新增试题按钮 -->
      <el-row type="flex" justify="end" class="addBtn">
        <el-button
          type="success"
          icon="el-icon-edit"
          @click="$router.push('/questions/new')"
          >新增试题</el-button
        >
      </el-row>
      <!-- /新增试题按钮 -->

      <!-- 查询表单 -->
      <el-form
        ref="isSearchForm"
        :model="searchInfo"
        label-width="80px"
        :inline="true"
      >
        <el-form-item label="学科">
          <el-select
            v-model="searchInfo.subjectID"
            placeholder="请选择"
            @change="getOtherList"
          >
            <el-option
              v-for="item in subjectList"
              :key="item.id"
              :label="item.subjectName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级目录">
          <el-select v-model="searchInfo.catalogID" placeholder="请选择">
            <el-option
              v-for="item in catalogList"
              :key="item.id"
              :label="item.directoryName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标签">
          <el-select v-model="searchInfo.tags" placeholder="请选择">
            <el-option
              v-for="item in tagsList"
              :key="item.id"
              :label="item.tagName"
              :value="item.tagName"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关键字">
          <el-input
            v-model="searchInfo.keyword"
            placeholder="请输入内容"
            style="width: 220px"
          ></el-input>
        </el-form-item>
        <el-form-item label="试题类型">
          <el-select v-model="searchInfo.questionType" placeholder="请选择">
            <el-option
              v-for="(item, index) in questionTypes"
              :key="item.value"
              :label="item"
              :value="index + 1"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="难度">
          <el-select v-model="searchInfo.difficulty" placeholder="请选择">
            <el-option
              v-for="(item, index) in difficultys"
              :key="index"
              :label="item"
              :value="index + 1"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="方向">
          <el-select v-model="searchInfo.direction" placeholder="请选择">
            <el-option
              v-for="(item, index) in directions"
              :key="index"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="录入人">
          <el-select v-model="searchInfo.creatorID" placeholder="请选择">
            <el-option
              v-for="item in userList"
              :key="item.id"
              :label="item.username"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题目备注">
          <el-input
            v-model="searchInfo.remarks"
            style="width: 220px"
            placeholder="请输入内容"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="企业简称">
          <el-input
            v-model="searchInfo.shortName"
            style="width: 220px"
            placeholder="请输入内容"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="城市">
          <el-select
            v-model="searchInfo.province"
            placeholder="请选择"
            style="width: 110px"
            @change="getCitys"
          >
            <el-option
              v-for="(item, index) in provinces"
              :key="index"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="searchInfo.city"
            placeholder="请选择"
            style="margin-left: 5px; width: 110px"
          >
            <el-option
              v-for="(item, index) in citys"
              :key="index"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <div class="btns">
          <el-button @click="clearSearch">清除</el-button>
          <el-button type="primary" @click="getChoiceList(searchInfo)"
            >搜索</el-button
          >
        </div>
      </el-form>
      <!-- /查询表单 -->

      <!-- 导航菜单 -->
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部" name="first"></el-tab-pane>
        <el-tab-pane label="待审核" name="second"></el-tab-pane>
        <el-tab-pane label="已审核" name="third"></el-tab-pane>
        <el-tab-pane label="已拒绝" name="fourth"></el-tab-pane>
      </el-tabs>
      <!-- /导航菜单 -->

      <!-- 表格区域 -->
      <el-alert type="info" show-icon>
        <template slot="title"> 数据一共{{ filterList.length }}条 </template>
      </el-alert>
      <el-table :data="filterList" border style="width: 100%">
        <el-table-column prop="number" label="试题编号" width="150">
        </el-table-column>
        <el-table-column prop="subject" label="学科" width="120">
        </el-table-column>
        <el-table-column prop="catalog" label="目录" width="120">
        </el-table-column>
        <el-table-column label="题型" width="120">
          <template slot-scope="scope">
            {{ questionTypes[scope.row.questionType] }}
          </template>
        </el-table-column>
        <el-table-column label="题干" width="300">
          <template slot-scope="scope">
            <div v-html="scope.row.question"></div>
          </template>
        </el-table-column>
        <el-table-column label="录入时间" width="120">
          <template slot-scope="scope">
            {{ scope.row.addDate | parseTime }}
          </template>
        </el-table-column>
        <el-table-column label="难度" width="120">
          <template slot-scope="scope">
            {{ difficultys[scope.row.difficulty - 1] }}
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="录入人" width="120">
        </el-table-column>
        <el-table-column prop="chkState" label="审核状态" width="120">
          <template slot-scope="scope">
            {{ chkStates[scope.row.chkState] }}
          </template>
        </el-table-column>
        <el-table-column prop="chkRemarks" label="审核意见" width="120">
        </el-table-column>
        <el-table-column prop="chkUser" label="审核人" width="120">
        </el-table-column>
        <el-table-column prop="publishState" label="发布状态" width="120">
          <template slot-scope="scope">
            {{ scope.row.publishState == '0' ? '未发布' : '已发布' }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="252">
          <template slot-scope="scope">
            <el-button type="text" @click="onPreview(scope.row)"
              >预览</el-button
            >
            <el-button
              type="text"
              :disabled="scope.row.chkState !== 0"
              @click="chkFn(scope.row)"
              >审核</el-button
            >
            <el-button
              type="text"
              :disabled="scope.row.publishState == '1'"
              @click="
                $router.push({
                  name: 'questions-new',
                  params: { id: scope.row.id }
                })
              "
              >修改</el-button
            >
            <el-button type="text" @click="changePublish(scope.row)">{{
              scope.row.publishState == '0' ? '上架' : '下架'
            }}</el-button>
            <el-button type="text" @click="delQu(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 表格区域 -->
      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageInfo.page"
        :page-sizes="[2, 5, 10, 15]"
        :page-size="pageInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="filterList.length"
      >
      </el-pagination>
      <!-- /分页区域 -->
    </el-card>

    <!-- 审核弹层 -->
    <el-dialog title="提示" :visible.sync="checkShow" width="30%">
      <questions-check
        @close="checkShow = false"
        :id="choiceId"
        @success="getChoiceList"
      ></questions-check>
    </el-dialog>

    <el-dialog
      title="题目预览"
      :visible.sync="previewDialogVisible"
      width="60%"
    >
      <questions-preview :questionList="questionListScoped"></questions-preview>
    </el-dialog>
  </div>
</template>

<script>
import { list as subjectList } from '@/api/hmmm/subjects'
import { list as CatalogList } from '@/api/hmmm/directorys'
import { list as tagsList } from '@/api/hmmm/tags'
import { list as userList } from '@/api/base/users'
import { choice, choicePublish, choiceAdd } from '@/api/hmmm/questions'
import { provinces, citys } from '@/api/hmmm/citys'
import questionsCheck from '../components/questions-check.vue'
import QuestionsPreview from '../components/questions-preview.vue'
export default {
  components: { questionsCheck, QuestionsPreview },
  name: 'quChoice',
  data() {
    return {
      searchInfo: {
        subjectID: null,
        catalogID: null,
        tags: null,
        keyword: null,
        questionType: null,
        difficulty: null,
        direction: null,
        creatorID: null,
        remarks: null,
        shortName: null,
        province: null,
        city: null
      },
      subjectList: null,
      catalogList: null,
      tagsList: null,
      userList: null,
      activeIndex: 1,
      activeName: 'first',
      choiceList: [],
      filterList: [],
      questionTypes: ['单选', '多选', '简单'],
      difficultys: ['简单', '一般', '困难'],
      chkStates: ['待审核', '通过', '拒绝'],
      directions: [
        'o2o',
        '外包服务',
        '企业服务',
        '互联网金融',
        '企业咨询',
        '互联网',
        '电子商务',
        '其他'
      ],
      provinces: [],
      citys: [],
      choiceId: 0,
      checkShow: false,
      previewDialogVisible: false,
      questionListScoped: {},
      pageInfo: {
        page: 1,
        pagesize: 5
      }
    }
  },
  methods: {
    async getChoiceList(val) {
      try {
        const { data } = await choice({ ...this.pageInfo, ...val })
        this.choiceList = data.items
        this.filterList = this.choiceList
        console.log(data)
        this.handleClick()
      } catch (error) {
        console.log(error)
      }
    },
    async getSubjectList() {
      try {
        const { data } = await subjectList()
        this.subjectList = data.items
        // console.log(data)
      } catch (error) {
        console.log(error)
      }
    },
    getOtherList() {
      this.getCatalogList()
      this.getTagsList()
    },
    async getCatalogList() {
      try {
        const { data } = await CatalogList(this.searchInfo.subjectID)
        // console.log(data)
        this.catalogList = data.items
      } catch (error) {}
    },
    async getTagsList() {
      try {
        const { data } = await tagsList(this.searchInfo.subjectID)
        // console.log(data)
        this.tagsList = data.items
      } catch (error) {}
    },
    async getUserList() {
      try {
        const { data } = await userList()
        console.log(data)
        this.userList = data.list
      } catch (error) {
        console.log(error)
      }
    },
    getCitys() {
      if (!this.searchInfo.province) return
      this.citys = citys(this.searchInfo.province)
    },
    clearSearch() {
      this.searchInfo = {
        subjectID: null,
        catalogID: null,
        tags: null,
        keyword: null,
        questionType: null,
        difficulty: null,
        direction: null,
        creatorID: null,
        remarks: null,
        shortName: null,
        province: null,
        city: null
      }
      this.getChoiceList()
    },
    handleClick() {
      if (this.activeName === 'second') {
        this.filterList = this.choiceList.filter((item) => item.chkState === 0)
      } else if (this.activeName === 'third') {
        this.filterList = this.choiceList.filter((item) => item.chkState === 1)
      } else if (this.activeName === 'fourth') {
        this.filterList = this.choiceList.filter((item) => item.chkState === 2)
      } else {
        this.filterList = this.choiceList
      }
    },
    changePublish(row) {
      let message = ''
      if (row.publishState === 0) {
        message = '上架'
      } else {
        message = '下架'
      }
      this.$confirm(`您确定${message}这道题目吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          if (row.publishState === 0) {
            row.publishState = 1
          } else {
            row.publishState = 0
          }
          const { data } = await choicePublish(row)
          console.log(data)
          this.$message({
            type: 'success',
            message: `${message}成功!`
          })
          this.getChoiceList()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
    },
    delQu(row) {
      console.log(row)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          row.choiceState = 0
          const { data } = await choiceAdd(row)
          console.log(data)
          this.getChoiceList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    chkFn(row) {
      console.log(row)
      this.choiceId = row.id
      this.checkShow = true
    },
    onPreview(row) {
      this.previewDialogVisible = true
      this.questionListScoped = row
    },
    handleSizeChange(newSize) {
      this.pageInfo.pagesize = newSize
      this.getChoiceList(this.searchInfo)
    },
    handleCurrentChange(newNum) {
      this.pageInfo.page = newNum
      this.getChoiceList(this.searchInfo)
    }
  },
  created() {
    this.getChoiceList()
    this.getSubjectList()
    this.getUserList()
    this.provinces = provinces()
  }
}
</script>

<style scoped lang="less">
.el-form {
  margin: 17px 0;
  font-size: 18px;
}
.btns {
  display: inline-block;
  margin-left: 146px;
}
/deep/ .is-active {
  border-bottom-color: #fff;
}
.el-pagination {
  margin-top: 15px;
}
.el-pagination {
  display: flex;
  justify-content: flex-end;
}
</style>
